<template>
  <div class="zabbix-items-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容 -->
    <div class="content-wrapper">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <h1><i class="fa fa-list-alt"></i> Zabbix监控项管理</h1>
          <p>管理Zabbix监控项，支持监控项的查看、创建、编辑和测试</p>
        </div>
      </div>

      <!-- 服务器选择和操作栏 -->
      <div class="control-panel glass-effect">
        <div class="server-selection">
          <label>选择Zabbix服务器：</label>
          <el-select
            v-model="selectedZabbixServer"
            placeholder="请选择Zabbix服务器"
            @change="handleServerChange"
            style="width: 300px;"
          >
            <el-option
              v-for="server in zabbixServers"
              :key="server.id"
              :label="`${server.name} (${server.connection_status_display})`"
              :value="server.id"
              :disabled="server.connection_status !== 'connected'"
            />
          </el-select>
        </div>

        <div class="action-buttons">
          <button @click="refreshData" class="glass-button refresh-button" :disabled="loading || !selectedZabbixServer">
            <i class="fa fa-refresh" :class="{ 'fa-spin': loading }"></i>
            刷新数据
          </button>
          <button @click="createItem" class="glass-button create-button" :disabled="!selectedZabbixServer || !selectedTemplate">
            <i class="fa fa-plus"></i>
            创建监控项
          </button>
          <button @click="batchTest" class="glass-button test-button" :disabled="!selectedZabbixServer || selectedItems.length === 0">
            <i class="fa fa-play"></i>
            批量测试
          </button>
          <button @click="batchDelete" class="glass-button delete-button" :disabled="!selectedZabbixServer || selectedItems.length === 0">
            <i class="fa fa-trash"></i>
            批量删除
          </button>
        </div>
      </div>

      <!-- 模板选择和搜索筛选 -->
      <div class="filter-panel glass-effect">
        <div class="template-selection">
          <label>选择模板：</label>
          <el-select
            v-model="selectedTemplate"
            placeholder="请选择模板"
            @change="handleTemplateChange"
            style="width: 400px;"
            filterable
            clearable
          >
            <el-option
              v-for="template in templates"
              :key="template.templateid"
              :label="template.name"
              :value="template.templateid"
            />
          </el-select>
        </div>

        <div class="search-controls">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索监控项名称或键值"
            style="width: 300px;"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <i class="fa fa-search"></i>
            </template>
          </el-input>

          <el-select v-model="filterType" placeholder="类型筛选" style="width: 180px;" clearable>
            <el-option label="全部类型" value="" />
            <el-option label="Zabbix agent" value="0" />
            <el-option label="Zabbix trapper" value="2" />
            <el-option label="Simple check" value="3" />
            <el-option label="SNMP agent" value="4" />
            <el-option label="Zabbix internal" value="5" />
            <el-option label="Zabbix aggregate" value="7" />
            <el-option label="External check" value="10" />
            <el-option label="Database monitor" value="11" />
            <el-option label="IPMI agent" value="12" />
            <el-option label="SSH agent" value="13" />
            <el-option label="TELNET agent" value="14" />
            <el-option label="Calculated" value="15" />
            <el-option label="JMX agent" value="16" />
            <el-option label="SNMP trap" value="17" />
            <el-option label="Dependent item" value="18" />
            <el-option label="HTTP agent" value="19" />
            <el-option label="Script" value="20" />
          </el-select>

          <el-select v-model="filterStatus" placeholder="状态筛选" style="width: 120px;" clearable>
            <el-option label="全部状态" value="" />
            <el-option label="已启用" value="0" />
            <el-option label="已禁用" value="1" />
          </el-select>
        </div>
      </div>

      <!-- 监控项列表 -->
      <div class="items-content">
        <!-- 骨架屏加载 -->
        <div v-if="loading" class="skeleton-container">
          <div v-for="i in 10" :key="i" class="skeleton-row glass-effect">
            <div class="skeleton-checkbox"></div>
            <div class="skeleton-text skeleton-name"></div>
            <div class="skeleton-text skeleton-key"></div>
            <div class="skeleton-text skeleton-type"></div>
            <div class="skeleton-text skeleton-status"></div>
            <div class="skeleton-actions"></div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else-if="filteredItems.length === 0" class="empty-state glass-effect">
          <i class="fa fa-list-alt"></i>
          <p>暂无监控项数据</p>
          <p v-if="!selectedZabbixServer" class="hint">请先选择Zabbix服务器</p>
        </div>

        <!-- 监控项表格 -->
        <div v-else class="items-table glass-effect">
          <div class="table-header">
            <div class="header-cell checkbox-cell">
              <el-checkbox
                v-model="selectAll"
                @change="handleSelectAll"
                :indeterminate="isIndeterminate"
              />
            </div>
            <div class="header-cell name-cell">监控项名称</div>
            <div class="header-cell key-cell">键值</div>
            <div class="header-cell template-cell">所属模板</div>
            <div class="header-cell hosts-cell">关联主机</div>
            <div class="header-cell type-cell">类型</div>
            <div class="header-cell interval-cell">间隔</div>
            <div class="header-cell status-cell">状态</div>

            <div class="header-cell actions-cell">操作</div>
          </div>

          <div class="table-body">
            <div
              v-for="item in paginatedItems"
              :key="item.itemid"
              class="table-row"
              :class="{ 'selected': selectedItems.includes(item.itemid) }"
            >
              <div class="body-cell checkbox-cell">
                <el-checkbox
                  v-model="selectedItems"
                  :value="item.itemid"
                />
              </div>
              <div class="body-cell name-cell">
                <div class="item-name" :title="item.name">{{ item.name }}</div>
                <div class="item-description" v-if="item.description">{{ item.description }}</div>
              </div>
              <div class="body-cell key-cell">
                <code class="item-key">{{ item.key_ }}</code>
              </div>
              <div class="body-cell template-cell">
                <span class="template-name">{{ currentTemplateName }}</span>
              </div>
              <div class="body-cell hosts-cell">
                <div v-if="templateHosts && templateHosts.length > 0">
                  <!-- 如果只有1个主机，直接显示 -->
                  <div v-if="templateHosts.length === 1" class="single-host">
                    <el-tag
                      size="small"
                      type="success"
                      style="margin-right: 4px;"
                    >
                      {{ templateHosts[0].name }}
                    </el-tag>
                  </div>
                  <!-- 如果有多个主机，显示第一个主机+总数，悬浮显示全部 -->
                  <el-popover
                    v-else
                    placement="top"
                    width="400"
                    trigger="hover"
                    popper-class="host-group-popover"
                  >
                    <template #reference>
                      <div class="hosts-container">
                        <el-tag
                          size="small"
                          type="success"
                          style="margin-right: 4px;"
                        >
                          {{ templateHosts[0].name }}
                        </el-tag>
                        <el-tag
                          size="small"
                          type="warning"
                          style="margin-left: 4px;"
                        >
                          共{{ templateHosts.length }}台
                        </el-tag>
                      </div>
                    </template>
                    <div class="host-detail">
                      <h4 style="color: #00eaff; margin: 0 0 12px 0;">{{ item.name }} - 关联主机</h4>
                      <div class="host-list">
                        <el-tag
                          v-for="host in templateHosts"
                          :key="host.hostid"
                          size="small"
                          type="success"
                          style="margin-right: 6px; margin-bottom: 6px;"
                        >
                          {{ host.name }}
                        </el-tag>
                      </div>
                      <div style="margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.7);">
                        总计：{{ templateHosts.length }} 台主机
                      </div>
                    </div>
                  </el-popover>
                </div>
                <span v-else class="text-muted">无关联主机</span>
              </div>
              <div class="body-cell type-cell">
                <span class="item-type">{{ getItemType(item.type) }}</span>
              </div>
              <div class="body-cell interval-cell">
                <span class="item-interval">{{ formatInterval(item.delay) }}</span>
              </div>
              <div class="body-cell status-cell">
                <span
                  class="status-badge"
                  :class="item.status === '0' ? 'status-enabled' : 'status-disabled'"
                >
                  {{ item.status === '0' ? '已启用' : '已禁用' }}
                </span>
              </div>

              <div class="body-cell actions-cell">
                <div class="action-buttons">
                  <button @click="viewItem(item)" class="action-btn view-btn" title="查看详情">
                    <i class="fa fa-eye"></i>
                  </button>
                  <button @click="editItem(item)" class="action-btn edit-btn" title="编辑">
                    <i class="fa fa-edit"></i>
                  </button>
                  <button @click="testItem(item)" class="action-btn test-btn" title="测试">
                    <i class="fa fa-play"></i>
                  </button>

                  <button @click="deleteItem(item)" class="action-btn delete-btn" title="删除">
                    <i class="fa fa-trash"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div v-if="!loading && filteredItems.length > 0" class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[20, 50, 100, 200]"
          :total="totalItems"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
          background
        />
      </div>
    </div>

    <!-- 监控项详情对话框 -->
    <el-dialog
      v-model="itemDetailVisible"
      :title="`监控项详情 - ${selectedItem?.name}`"
      width="80%"
      class="item-detail-dialog"
    >
      <div v-if="selectedItem" class="item-detail-content">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h4>基本信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <label>监控项名称:</label>
              <span>{{ selectedItem.name }}</span>
            </div>
            <div class="info-item">
              <label>键值:</label>
              <code>{{ selectedItem.key_ }}</code>
            </div>
            <div class="info-item">
              <label>类型:</label>
              <span>{{ getItemType(selectedItem.type) }}</span>
            </div>
            <div class="info-item">
              <label>状态:</label>
              <span :class="selectedItem.status === '0' ? 'text-success' : 'text-danger'">
                {{ selectedItem.status === '0' ? '已启用' : '已禁用' }}
              </span>
            </div>
            <div class="info-item">
              <label>更新间隔:</label>
              <span>{{ formatInterval(selectedItem.delay) }}</span>
            </div>
            <div class="info-item">
              <label>数据类型:</label>
              <span>{{ getValueType(selectedItem.value_type) }}</span>
            </div>
            <div class="info-item">
              <label>单位:</label>
              <span>{{ selectedItem.units || '无' }}</span>
            </div>
            <div class="info-item">
              <label>描述:</label>
              <span>{{ selectedItem.description || '无描述' }}</span>
            </div>
          </div>
        </div>



        <!-- 配置信息 -->
        <div class="detail-section">
          <h4>配置信息</h4>
          <div class="config-info">
            <div class="config-item" v-if="selectedItem.params">
              <label>参数:</label>
              <code>{{ selectedItem.params }}</code>
            </div>
            <div class="config-item" v-if="selectedItem.username">
              <label>用户名:</label>
              <span>{{ selectedItem.username }}</span>
            </div>
            <div class="config-item" v-if="selectedItem.timeout">
              <label>超时时间:</label>
              <span>{{ selectedItem.timeout }}s</span>
            </div>
            <div class="config-item" v-if="selectedItem.history">
              <label>历史保存期:</label>
              <span>{{ selectedItem.history }}天</span>
            </div>
            <div class="config-item" v-if="selectedItem.trends">
              <label>趋势保存期:</label>
              <span>{{ selectedItem.trends }}天</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 创建/编辑监控项对话框 -->
    <el-dialog
      v-model="itemFormVisible"
      :title="isEditing ? '编辑监控项' : '创建监控项'"
      width="800px"
      class="item-form-dialog"
    >
      <div class="item-form-content">
        <el-form :model="itemForm" :rules="itemFormRules" ref="itemFormRef" label-width="120px">
          <el-form-item label="监控项名称" prop="name">
            <el-input v-model="itemForm.name" placeholder="请输入监控项名称" />
          </el-form-item>

          <el-form-item label="键值" prop="key_">
            <el-input v-model="itemForm.key_" placeholder="请输入键值，如：system.cpu.load[all,avg1]" />
          </el-form-item>

          <el-form-item label="所属模板">
            <el-input :value="currentTemplateName" readonly style="background-color: #f5f7fa;" />
          </el-form-item>

          <el-form-item label="类型" prop="type">
            <el-select v-model="itemForm.type" placeholder="请选择类型" style="width: 100%;">
              <el-option label="Zabbix agent" value="0" />
              <el-option label="SNMP agent" value="4" />
              <el-option label="Simple check" value="3" />
              <el-option label="Zabbix internal" value="5" />
              <el-option label="Zabbix trapper" value="2" />
              <el-option label="External check" value="10" />
              <el-option label="Database monitor" value="11" />
              <el-option label="HTTP agent" value="19" />
            </el-select>
          </el-form-item>

          <el-form-item label="数据类型" prop="value_type">
            <el-select v-model="itemForm.value_type" placeholder="请选择数据类型" style="width: 100%;">
              <el-option label="数字(浮点)" value="0" />
              <el-option label="字符" value="1" />
              <el-option label="日志" value="2" />
              <el-option label="数字(无符号)" value="3" />
              <el-option label="文本" value="4" />
            </el-select>
          </el-form-item>

          <el-form-item label="更新间隔" prop="delay">
            <el-input v-model="itemForm.delay" placeholder="如：30s, 1m, 1h" />
          </el-form-item>

          <el-form-item label="单位" prop="units">
            <el-input v-model="itemForm.units" placeholder="如：B, %, s" />
          </el-form-item>

          <el-form-item label="描述" prop="description">
            <el-input v-model="itemForm.description" type="textarea" :rows="3" placeholder="请输入描述" />
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="itemForm.status">
              <el-radio value="0">启用</el-radio>
              <el-radio value="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <button @click="itemFormVisible = false" class="glass-button">取消</button>
          <button @click="saveItem" class="glass-button primary">保存</button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script setup lang="ts">
import { monitoringApi } from '@/api/monitoring'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, ref, watch } from 'vue'

// 响应式数据
const loading = ref(false)
const zabbixServers = ref([])
const selectedZabbixServer = ref(null)
const templates = ref([])
const selectedTemplate = ref('')
const currentTemplateName = ref('')
const templateHosts = ref([])
const items = ref([])
const selectedItems = ref([])
const searchKeyword = ref('')
const filterType = ref('')
const filterStatus = ref('')
const currentPage = ref(1)
const pageSize = ref(50)
const totalItems = ref(0)

// 选择状态
const selectAll = ref(false)
const isIndeterminate = ref(false)

// 对话框状态
const itemDetailVisible = ref(false)
const selectedItem = ref(null)
const itemFormVisible = ref(false)
const isEditing = ref(false)
const itemFormRef = ref(null)

// 表单数据
const itemForm = ref({
  name: '',
  key_: '',
  hostid: '',
  type: '0',
  value_type: '0',
  delay: '30s',
  units: '',
  description: '',
  status: '0'
})

// 表单验证规则
const itemFormRules = {
  name: [{ required: true, message: '请输入监控项名称', trigger: 'blur' }],
  key_: [{ required: true, message: '请输入键值', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  value_type: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
  delay: [{ required: true, message: '请输入更新间隔', trigger: 'blur' }]
}

// 计算属性
const filteredItems = computed(() => {
  // 确保items.value是数组
  let result = items.value || []

  // 搜索过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(item =>
      item.name.toLowerCase().includes(keyword) ||
      item.key_.toLowerCase().includes(keyword) ||
      (item.description && item.description.toLowerCase().includes(keyword))
    )
  }



  // 类型过滤
  if (filterType.value) {
    result = result.filter(item => item.type === filterType.value)
  }

  // 状态过滤
  if (filterStatus.value) {
    result = result.filter(item => item.status === filterStatus.value)
  }

  totalItems.value = result.length
  return result
})

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredItems.value.slice(start, end)
})

// 监听器
watch(selectedItems, (newVal) => {
  const total = paginatedItems.value.length
  if (newVal.length === 0) {
    selectAll.value = false
    isIndeterminate.value = false
  } else if (newVal.length === total) {
    selectAll.value = true
    isIndeterminate.value = false
  } else {
    selectAll.value = false
    isIndeterminate.value = true
  }
})

// 方法
const loadZabbixServers = async () => {
  try {
    const response = await monitoringApi.getZabbixServers()
    if (response.data.success) {
      zabbixServers.value = response.data.data
    }
  } catch (error) {
    console.error('加载Zabbix服务器失败:', error)
    ElMessage.error('加载Zabbix服务器失败')
  }
}

const loadTemplates = async () => {
  if (!selectedZabbixServer.value) return

  try {
    const response = await monitoringApi.getZabbixTemplates(selectedZabbixServer.value)
    if (response.data.success) {
      templates.value = response.data.data || []
      console.log('加载模板数据:', templates.value.length, '个模板')
    } else {
      ElMessage.error(response.data.message || '加载模板失败')
    }
  } catch (error) {
    console.error('加载模板失败:', error)
    ElMessage.error('加载模板失败')
  }
}

const loadTemplateItems = async () => {
  if (!selectedZabbixServer.value || !selectedTemplate.value) {
    items.value = []
    return
  }

  loading.value = true
  try {
    const response = await monitoringApi.getTemplateItems(
      selectedZabbixServer.value,
      selectedTemplate.value,
      searchKeyword.value
    )
    if (response.data.success) {
      const data = response.data.data
      items.value = data.items || []

      // 更新当前模板信息
      if (data.template) {
        currentTemplateName.value = data.template.name
        // 直接使用后端返回的主机信息
        templateHosts.value = data.template.hosts || []
        console.log('模板关联主机:', templateHosts.value.length, '台')
      }
    } else {
      ElMessage.error(response.data.message || '加载监控项失败')
    }
  } catch (error) {
    console.error('加载监控项失败:', error)
    ElMessage.error('加载监控项失败')
  } finally {
    loading.value = false
  }
}

const loadTemplateHosts = async () => {
  if (!selectedZabbixServer.value || !selectedTemplate.value) {
    templateHosts.value = []
    return
  }

  try {
    // 获取模板详情，包含关联的主机
    const response = await monitoringApi.getZabbixTemplateDetail(selectedZabbixServer.value, selectedTemplate.value)
    if (response.data.success && response.data.data.hosts) {
      templateHosts.value = response.data.data.hosts
    } else {
      templateHosts.value = []
    }
  } catch (error) {
    console.error('加载模板主机失败:', error)
    templateHosts.value = []
  }
}

const handleServerChange = () => {
  selectedItems.value = []
  items.value = []
  templates.value = []
  selectedTemplate.value = ''
  currentTemplateName.value = ''
  templateHosts.value = []
  currentPage.value = 1

  if (selectedZabbixServer.value) {
    loadTemplates()
  }
}

const handleTemplateChange = () => {
  selectedItems.value = []
  items.value = []
  templateHosts.value = []
  currentPage.value = 1

  if (selectedTemplate.value) {
    loadTemplateItems()
  } else {
    currentTemplateName.value = ''
  }
}

const refreshData = () => {
  if (selectedZabbixServer.value) {
    loadTemplates()
    if (selectedTemplate.value) {
      loadTemplateItems()
    }
  }
}

const handleSearch = () => {
  currentPage.value = 1
  // 如果选择了模板，重新加载监控项以应用搜索
  if (selectedTemplate.value) {
    loadTemplateItems()
  }
}

const handleSelectAll = (checked: boolean) => {
  if (checked) {
    selectedItems.value = paginatedItems.value.map(item => item.itemid)
  } else {
    selectedItems.value = []
  }
}

const handlePageSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
}

const handlePageChange = (page: number) => {
  currentPage.value = page
}

// 工具函数

const getItemType = (type: string | number) => {
  const typeStr = String(type)
  const types = {
    '0': 'Zabbix agent',
    '1': 'SNMPv1 agent',
    '2': 'Zabbix trapper',
    '3': 'Simple check',
    '4': 'SNMPv2 agent',
    '5': 'Zabbix internal',
    '6': 'SNMPv3 agent',
    '7': 'Zabbix aggregate',
    '8': 'Web monitoring',
    '9': 'External check',
    '10': 'Database monitor',
    '11': 'IPMI agent',
    '12': 'SSH agent',
    '13': 'TELNET agent',
    '14': 'Calculated',
    '15': 'JMX agent',
    '16': 'SNMP trap',
    '17': 'Dependent item',
    '18': 'HTTP agent',
    '19': 'SNMP agent',
    '20': 'Script'
  }
  return types[typeStr] || `未知类型 ${type}`
}

const getValueType = (valueType: string) => {
  const types = {
    '0': '数字(浮点)',
    '1': '字符',
    '2': '日志',
    '3': '数字(无符号)',
    '4': '文本'
  }
  return types[valueType] || `类型 ${valueType}`
}

const formatInterval = (delay: string) => {
  if (!delay) return '未设置'
  return delay
}

const formatValue = (value: string, units: string) => {
  if (value === null || value === undefined || value === '') return '无数据'
  return units ? `${value} ${units}` : value
}

const formatTime = (timestamp: string) => {
  if (!timestamp || timestamp === '0') return '无数据'
  const timestampNum = parseInt(timestamp)
  if (timestampNum === 0 || isNaN(timestampNum)) return '无数据'
  const date = new Date(timestampNum * 1000)
  return date.toLocaleString('zh-CN')
}



// 操作方法
const viewItem = (item: any) => {
  selectedItem.value = item
  itemDetailVisible.value = true
}

const editItem = (item: any) => {
  if (!selectedZabbixServer.value || !selectedTemplate.value) {
    ElMessage.warning('请先选择Zabbix服务器和模板')
    return
  }

  selectedItem.value = item
  isEditing.value = true

  // 填充表单数据，适应模板架构
  itemForm.value = {
    itemid: item.itemid, // 编辑时需要itemid
    name: item.name || '',
    key_: item.key_ || '',
    type: item.type?.toString() || '0',
    value_type: item.value_type?.toString() || '3',
    delay: item.delay || '30s',
    description: item.description || '',
    status: item.status?.toString() || '0'
  }

  itemFormVisible.value = true
}

const createItem = () => {
  if (!selectedTemplate.value) {
    ElMessage.warning('请先选择模板')
    return
  }

  isEditing.value = false
  itemForm.value = {
    name: '',
    key_: '',
    type: '0',
    value_type: '0',
    delay: '30s',
    units: '',
    description: '',
    status: '0'
  }
  itemFormVisible.value = true
}

const saveItem = async () => {
  if (!itemFormRef.value) return

  try {
    await itemFormRef.value.validate()

    const data = {
      ...itemForm.value,
      zabbix_server_id: selectedZabbixServer.value
    }

    if (isEditing.value) {
      // 编辑监控项
      await monitoringApi.updateZabbixItem(selectedZabbixServer.value, itemForm.value.itemid, data)
      ElMessage.success('监控项更新成功')
    } else {
      // 在模板中创建监控项
      data.templateid = selectedTemplate.value
      await monitoringApi.createZabbixItem(selectedZabbixServer.value, data)
      ElMessage.success(`监控项已在模板"${currentTemplateName.value}"中创建成功`)
    }

    itemFormVisible.value = false
    if (selectedTemplate.value) {
      loadTemplateItems()
    }
  } catch (error) {
    console.error('保存监控项失败:', error)
    ElMessage.error('保存监控项失败')
  }
}

const testItem = async (item: any) => {
  try {
    ElMessage.info('正在测试监控项...')
    const response = await monitoringApi.testZabbixItem(selectedZabbixServer.value, item.itemid)
    if (response.data.success) {
      ElMessage.success(`测试成功: ${response.data.data.value || '无返回值'}`)
    } else {
      ElMessage.error(`测试失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('测试监控项失败:', error)
    ElMessage.error('测试监控项失败')
  }
}



const deleteItem = async (item: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除监控项 "${item.name}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await monitoringApi.deleteZabbixItem(selectedZabbixServer.value, item.itemid)
    ElMessage.success('监控项删除成功')
    if (selectedTemplate.value) {
      loadTemplateItems()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除监控项失败:', error)
      ElMessage.error('删除监控项失败')
    }
  }
}

const batchTest = async () => {
  if (selectedItems.value.length === 0) {
    ElMessage.warning('请先选择要测试的监控项')
    return
  }

  try {
    ElMessage.info(`正在测试 ${selectedItems.value.length} 个监控项...`)
    const response = await monitoringApi.batchTestZabbixItems(selectedZabbixServer.value, selectedItems.value)
    if (response.data.success) {
      ElMessage.success(`批量测试完成，成功: ${response.data.data.success_count}，失败: ${response.data.data.failed_count}`)
    } else {
      ElMessage.error(`批量测试失败: ${response.data.message}`)
    }
  } catch (error) {
    console.error('批量测试失败:', error)
    ElMessage.error('批量测试失败')
  }
}

const batchDelete = async () => {
  if (selectedItems.value.length === 0) {
    ElMessage.warning('请先选择要删除的监控项')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedItems.value.length} 个监控项吗？此操作不可恢复。`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await monitoringApi.batchDeleteZabbixItems(selectedZabbixServer.value, selectedItems.value)
    ElMessage.success('批量删除成功')
    selectedItems.value = []
    if (selectedTemplate.value) {
      loadTemplateItems()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 状态保存和恢复
const saveState = () => {
  const state = {
    selectedZabbixServer: selectedZabbixServer.value,
    selectedTemplate: selectedTemplate.value,
    searchKeyword: searchKeyword.value
  }
  localStorage.setItem('zabbix-items-state', JSON.stringify(state))
}

const restoreState = () => {
  try {
    const savedState = localStorage.getItem('zabbix-items-state')
    if (savedState) {
      const state = JSON.parse(savedState)
      if (state.selectedZabbixServer) {
        selectedZabbixServer.value = state.selectedZabbixServer
      }
      if (state.selectedTemplate) {
        selectedTemplate.value = state.selectedTemplate
      }
      if (state.searchKeyword) {
        searchKeyword.value = state.searchKeyword
      }
    }
  } catch (error) {
    console.error('恢复状态失败:', error)
  }
}

// 监听状态变化并保存
watch([selectedZabbixServer, selectedTemplate, searchKeyword], () => {
  saveState()
})

// 生命周期
onMounted(async () => {
  await loadZabbixServers()
  restoreState()

  // 如果有保存的状态，自动加载数据
  if (selectedZabbixServer.value) {
    await loadTemplates()
    if (selectedTemplate.value) {
      await loadTemplateItems()
    }
  }
})
</script>

<style scoped>
/* 星空背景 */
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite;
  opacity: 0.6;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 25px, rgba(255,255,255,0.9), transparent);
  background-repeat: repeat;
  background-size: 300px 150px;
  animation: zoom 40s infinite;
  opacity: 0.4;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, #fff, transparent),
    radial-gradient(1px 1px at 150px 150px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 400px 200px;
  animation: zoom 60s infinite;
  opacity: 0.3;
}

@keyframes zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* 主容器 */
.zabbix-items-container {
  min-height: 100vh;
  position: relative;
}

.content-wrapper {
  position: relative;
  z-index: 1;
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* 玻璃效果 */
.glass-effect {
  background: rgba(164, 244, 186, 0.05);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 页面标题 */
.page-header {
  padding: 24px;
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.header-content h1 {
  color: #ffffff;
  font-size: 28px;
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-content h1 i {
  color: #a4f4ba;
  font-size: 24px;
}

.header-content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin: 8px 0 0 0;
}

/* 控制面板 */
.control-panel {
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.server-selection {
  display: flex;
  align-items: center;
  gap: 12px;
}

.server-selection label {
  color: #ffffff;
  font-weight: 500;
  white-space: nowrap;
}

.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

/* 玻璃按钮 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.glass-button:hover:not(:disabled) {
  background: rgba(164, 244, 186, 0.25) !important;
  border-color: rgba(164, 244, 186, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  transform: translateY(-1px);
}

.glass-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.glass-button i {
  margin-right: 6px !important;
}

.glass-button.primary {
  background: rgba(64, 158, 255, 0.3) !important;
  border-color: rgba(64, 158, 255, 0.5) !important;
}

.glass-button.primary:hover:not(:disabled) {
  background: rgba(64, 158, 255, 0.4) !important;
  border-color: rgba(64, 158, 255, 0.6) !important;
}

/* 刷新按钮 - 紫色 */
.refresh-button {
  background: rgba(138, 43, 226, 0.2) !important;
  border-color: rgba(138, 43, 226, 0.4) !important;
}

.refresh-button:hover:not(:disabled) {
  background: rgba(138, 43, 226, 0.3) !important;
  border-color: rgba(138, 43, 226, 0.6) !important;
  box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
}

.refresh-button i {
  color: #8a2be2 !important;
}

/* 创建按钮 - 绿色 */
.create-button {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

.create-button:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.3) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
}

.create-button i {
  color: #22c55e !important;
}

/* 测试按钮 - 蓝色 */
.test-button {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.test-button:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.3) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
}

.test-button i {
  color: #3b82f6 !important;
}

/* 删除按钮 - 红色 */
.delete-button {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.delete-button:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
}

.delete-button i {
  color: #ef4444 !important;
}

.refresh-button:hover:not(:disabled) {
  border-color: rgba(64, 158, 255, 0.4);
  color: #409eff;
}

.create-button:hover:not(:disabled) {
  border-color: rgba(103, 194, 58, 0.4);
  color: #67c23a;
}

.test-button:hover:not(:disabled) {
  border-color: rgba(230, 162, 60, 0.4);
  color: #e6a23c;
}

.delete-button:hover:not(:disabled) {
  border-color: rgba(245, 108, 108, 0.4);
  color: #f56c6c;
}

/* 筛选面板 */
.filter-panel {
  padding: 20px;
  margin-bottom: 20px;
}

.template-selection {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-selection label {
  color: #ffffff;
  font-weight: 500;
  min-width: 80px;
}

.search-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* 监控项内容区域 */
.items-content {
  margin-bottom: 20px;
}

/* 骨架屏 */
.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-row {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.skeleton-checkbox {
  width: 16px;
  height: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 3px;
}

.skeleton-text {
  height: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
}

.skeleton-name { width: 200px; }
.skeleton-key { width: 150px; }
.skeleton-type { width: 100px; }
.skeleton-status { width: 80px; }

.skeleton-actions {
  width: 120px;
  height: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
}

@keyframes skeleton-loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.empty-state i {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
  color: #a4f4ba;
}

.empty-state p {
  font-size: 16px;
  margin: 8px 0;
}

.empty-state .hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}

/* 监控项表格 */
.items-table {
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(164, 244, 186, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  color: #a4f4ba;
}

.table-body {
  max-height: 600px;
  overflow-y: auto;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.table-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.table-row.selected {
  background: rgba(164, 244, 186, 0.1);
  border-color: rgba(164, 244, 186, 0.2);
}

.header-cell, .body-cell {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
}

.checkbox-cell { width: 50px; justify-content: center; }
.name-cell { width: 280px; }
.key-cell { width: 220px; }
.template-cell { width: 180px; }
.hosts-cell { width: 200px; }
.type-cell { width: 120px; }
.interval-cell { width: 100px; }
.status-cell { width: 100px; }
.actions-cell { width: 180px; justify-content: center; }

/* 表格内容样式 */
.item-name {
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.item-description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-key {
  background: rgba(164, 244, 186, 0.1);
  color: #a4f4ba;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  border: 1px solid rgba(164, 244, 186, 0.2);
}

.template-name {
  color: #87ceeb;
  font-weight: 500;
  font-size: 13px;
}

.hosts-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hosts-text {
  color: #98fb98;
  font-size: 12px;
  line-height: 1.3;
}

.no-hosts {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-size: 12px;
}

.item-type {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.item-interval {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.status-enabled {
  background: rgba(103, 194, 58, 0.2);
  color: #67c23a;
  border: 1px solid rgba(103, 194, 58, 0.3);
}

.status-disabled {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
  border: 1px solid rgba(245, 108, 108, 0.3);
}



/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

/* 操作按钮基础样式 */
.action-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 1);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 编辑按钮 - 蓝色 */
.edit-btn {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #3b82f6 !important;
}

.edit-btn:hover {
  background: rgba(59, 130, 246, 0.4) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  color: #60a5fa !important;
}

/* 测试按钮 - 绿色 */
.test-btn {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #22c55e !important;
}

.test-btn:hover {
  background: rgba(34, 197, 94, 0.4) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  color: #4ade80 !important;
}

/* 历史按钮 - 紫色 */
.history-btn {
  background: rgba(147, 51, 234, 0.2) !important;
  border-color: rgba(147, 51, 234, 0.4) !important;
  color: #9333ea !important;
}

.history-btn:hover {
  background: rgba(147, 51, 234, 0.4) !important;
  border-color: rgba(147, 51, 234, 0.6) !important;
  color: #a855f7 !important;
}

/* 删除按钮 - 红色 */
.delete-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}

.delete-btn:hover {
  background: rgba(239, 68, 68, 0.4) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #f87171 !important;
}

.action-buttons .el-button {
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.action-buttons .el-button.is-circle {
  border-radius: 50%;
}

/* 按钮颜色配置 */
.action-buttons .el-button--info {
  background: rgba(144, 147, 153, 0.2);
  border-color: rgba(144, 147, 153, 0.3);
  color: rgba(144, 147, 153, 0.9);
}

.action-buttons .el-button--info:hover {
  background: rgba(144, 147, 153, 0.4);
  border-color: rgba(144, 147, 153, 0.6);
  color: #909399;
}

.action-buttons .el-button--warning {
  background: rgba(230, 162, 60, 0.2);
  border-color: rgba(230, 162, 60, 0.3);
  color: rgba(230, 162, 60, 0.9);
}

.action-buttons .el-button--warning:hover {
  background: rgba(230, 162, 60, 0.4);
  border-color: rgba(230, 162, 60, 0.6);
  color: #E6A23C;
}

.action-buttons .el-button--success {
  background: rgba(103, 194, 58, 0.2);
  border-color: rgba(103, 194, 58, 0.3);
  color: rgba(103, 194, 58, 0.9);
}

.action-buttons .el-button--success:hover {
  background: rgba(103, 194, 58, 0.4);
  border-color: rgba(103, 194, 58, 0.6);
  color: #67C23A;
}

.action-buttons .el-button--primary {
  background: rgba(64, 158, 255, 0.2);
  border-color: rgba(64, 158, 255, 0.3);
  color: rgba(64, 158, 255, 0.9);
}

.action-buttons .el-button--primary:hover {
  background: rgba(64, 158, 255, 0.4);
  border-color: rgba(64, 158, 255, 0.6);
  color: #409EFF;
}

.action-buttons .el-button--danger {
  background: rgba(245, 108, 108, 0.2);
  border-color: rgba(245, 108, 108, 0.3);
  color: rgba(245, 108, 108, 0.9);
}

.action-buttons .el-button--danger:hover {
  background: rgba(245, 108, 108, 0.4);
  border-color: rgba(245, 108, 108, 0.6);
  color: #F56C6C;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  margin-bottom: 60px; /* 避免被footer挡住 */
}

/* 对话框样式 */
.item-detail-dialog :deep(.el-dialog),
.item-form-dialog :deep(.el-dialog),
{
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.item-detail-dialog :deep(.el-dialog__header),
.item-form-dialog :deep(.el-dialog__header) {
  background: rgba(164, 244, 186, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-detail-dialog :deep(.el-dialog__title),
.item-form-dialog :deep(.el-dialog__title) {
  color: #ffffff;
}

.item-detail-content,
.item-form-content {
  color: #ffffff;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  color: #a4f4ba;
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2);
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
}

.info-item span,
.info-item code {
  color: #ffffff;
  font-size: 14px;
}

.info-item code {
  background: rgba(164, 244, 186, 0.1);
  color: #a4f4ba;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  border: 1px solid rgba(164, 244, 186, 0.2);
}

.text-success {
  color: #67c23a !important;
}

.text-danger {
  color: #f56c6c !important;
}

/* 配置信息 */
.config-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.data-item,
.config-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.data-item label,
.config-item label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  min-width: 80px;
}

.data-value {
  color: #a4f4ba;
  font-weight: 500;
  font-size: 14px;
}

.data-time {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.config-item code {
  background: rgba(164, 244, 186, 0.1);
  color: #a4f4ba;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  border: 1px solid rgba(164, 244, 186, 0.2);
}

/* 表单样式 */
.item-form-content :deep(.el-form-item__label) {
  color: #ffffff !important;
}

.item-form-content :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.item-form-content :deep(.el-input__inner) {
  color: #ffffff;
  background: transparent;
}

.item-form-content :deep(.el-textarea__inner) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.item-form-content :deep(.el-select) {
  width: 100%;
}

.item-form-content :deep(.el-radio__label) {
  color: #ffffff !important;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .table-header,
  .table-row {
    font-size: 13px;
  }

  .name-cell { width: 180px; }
  .key-cell { width: 140px; }
  .template-cell { width: 120px; }
  .hosts-cell { width: 140px; }

}

@media (max-width: 768px) {
  .control-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .server-selection {
    justify-content: center;
  }

  .action-buttons {
    justify-content: center;
  }

  .search-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .items-table {
    overflow-x: auto;
  }

  .table-header,
  .table-row {
    min-width: 800px;
  }
}

/* 主机容器样式 */
.hosts-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.hosts-container:hover {
  background: rgba(164, 244, 186, 0.1);
  transform: translateY(-1px);
}

.single-host {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.host-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.text-muted {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* 气泡弹窗样式 */
:deep(.host-group-popover) {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

:deep(.host-group-popover .el-popper__arrow::before) {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.host-detail h4 {
  color: #00eaff !important;
  margin: 0 0 12px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.host-detail .host-list {
  margin-bottom: 8px;
}


</style>
